<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bg1{
            width:100px;
            height: 100px;
            border:1px solid red;
        }
        .bg2{
            background:red;
        }
        .bg3{
            color:green;
            font-size: 50px;
        }

    </style>
    <script src="jquery1.7/jquery-1.7.js"></script>
    <script>
        $(function(){
            $(".btn1").click(function(){
              /*   方式一：jQuery对象.css的方式设置
                    jQuery对象.css("样式名","样式值");
                    jQuery对象.css("样式名","样式值").css("样式名","样式值").css("样式名","样式值").css("样式名","样式值")
                    jQuery对象.css(对象) */

             /*    方式二：jQuery对象.addClass的方式
                        jQuery对象.addClass("类名1  类名2");添加类样式
                        jQuery对象.removeClass("类名1 类名2");删除类样式 */

                //添加类样式
                $("#mydiv").addClass("bg2 bg3");

                //删除类样式
                $("#mydiv").removeClass("bg1");

            });

            $(".btn2").click(function(){
                //使用html()
                // console.log($("#mydiv2").html());//输出整个p标签
                // $("#mydiv2").html("<h5>我是h5标签</h5>");

                //使用text()
                // console.log($("#mydiv2").text());//输出纯文本
                $("#mydiv2").text("<h4>我是h4标签</h4>");//不会解析h4标签，将h4标签当成纯文本
                // 类似于innerHTML和innerText的区别
            });

            $(".btn3").click(function(){
               /*  
                jQuery对象.attr("属性名")获取属性值
                jQuery对象.attr("属性名","属性值")设置属性
                jQuery对象.attr(对象)设置多个属性
                jQuery对象.removeAttr("属性名 属性名") 删除属性
             */
                console.log($("#username").attr("hello"));//获取属性值
                console.log($("#username").attr("value"));//如果获取value值，不建议使用这样的方式，建议你使用val()方法
                console.log($("#username").val());
                $("#username").attr("xixi","haha");//设置属性
                $("#username").attr({//设置多个属性
                    heihei:"hehe",
                    title:"hh"
                });
                $("#username").removeAttr("hello xixi");

            });
        });
    </script>
</head>
<body>
    <input type="button" value="设置样式" class="btn1">
    <input type="button" value="设置内容" class="btn2">
    <input type="button" value="获取属性" class="btn3">
    <div id="mydiv" class="bg1">
        我是div
    </div>
    <div id="mydiv2">
        <p>我是p标签</p>
    </div>
    <input type="text" id="username" hello="world" >
</body>
</html>